<template>
  <div class="wrap">
    <div class="more_title">精彩视频</div>
    <div class="flex flex_v_center mb10" style="align-items: stretch" v-for="item in list" :key="item.id">
      <div class="item_date">
        <div class="item_date_d">{{moment(item.dateCreated).format('DD')}}</div>
        <div class="item_date_ym">{{moment(item.dateCreated).format('YYYY-MM')}}</div>
      </div>
      <div class="item_content">
        <a href="javascript:;" @click="toDetail(item.id)" class="item_content_title text_ellipsis">{{ item.title || item.name }}</a>
        <a-button size="small" class="more_btn" @click="toDetail(item.id)">查看<a-icon type="right" /></a-button>
      </div>
    </div>
    <a-pagination v-model="current" @change="changePage" :total="total" show-less-items class="fr mt10 mb10" />
  </div>
</template>

<script>
import moment from 'moment'
import { mapState } from 'vuex'
import { findAllVideo } from '@/api/config'
export default {
  name: 'video',
  components: { },
  data () {
    return {
      moment,
      list: [],
      total: 0,
      current: 1
    }
  },
  mounted () {
    this.getList()
  },
  computed: {
    ...mapState({
    })
  },
  watch: {
  },
  methods: {
    async getList () {
      let params = {
        status: 'PUBLISHED',
        pageSize: 10,
        pageNum: this.current
      }
      let res = await findAllVideo(params)
      if (res.code === 200) {
        this.list = res.data.items
        this.total = res.data.totalCount
      }
    },
    changePage (e) {
      console.info(e)
      this.current = e
      this.getList()
    },
    toDetail (id) {
      this.$router.push(`/front/detail?type=video&id=${id}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../styles/var.styl'
.wrap
  width: 1200px;
  margin 0 auto
  padding 0 20px
  .more_title
    font-size 16px
    border-bottom 2px solid #1677cb
    margin-bottom 15px
    font-weight bold
    padding-bottom: 5px;
  .item_date
    height 80px
    padding 0 15px
    width 150px
    text-align center
    background: #0b6cb8;
    color #fff
    display flex
    justify-content center
    align-items center
    flex-direction column
    // flex 1
    .item_date_d
      font-weight bold
      // margin-bottom 8px
      font-size: 28px;
  .item_content
    padding: 10px 15px;
    width: calc(100% - 150px);
    border 1px solid #eee
    flex 1
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item_content_title
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 8px;
    .item_content_content
      height 42px
      overflow hidden
      white-space normal
      text-overflow ellipsis
      display -webkit-box
      -webkit-line-clamp 2
      -webkit-box-orient vertical
      margin-bottom: 8px;
    .more_btn
      border 1px solid #0b6cb8
      color #0b6cb8
      float: right;
</style>
